<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	<body>
		
		<div>
			DOM 中的属性操作
		</div>
		
		<input data-id="333"   value="用户名" name="username" />
	
		<form action="#" method="post">
			
			
			<span>选择年份</span>
			<select>
				
				<option value="2024"> 2024年</option>
				<option value="2025"> 2025年</option>
				<option value="2026"> 2026年</option>
				
			</select>
			
		</form>
		
		<button >点击</button>
		
		<script>
			
			
			
			// 单击事件
			var btn = document.getElementsByTagName("button")[0];
			btn.onclick= function(e){
				
				console.log(e)
			}
			
			// 键盘事件

			var input = document.getElementsByTagName("input")[0];
		
		    input.onkeydown= function(ev){
				
				console.log(ev.key)
			}
			input.onkeyup= function(ev){
				
				console.log(ev.key)
			}
			
			//下拉事件
			var select = document.getElementsByTagName("select")[0];
			
			select.onchange = function(ev){
				
				// ev 是Event 对象，是匿名函数的第一个参数 ，无论名字是e 还是ev 都指代 Event
				console.log(ev)
				
				console.log(this.options.selectedIndex)
				
				var index = this.options.selectedIndex;
				
				var val = this.options[index].value;
				
				console.log(val)
				
				
				
			}
			
			
	
		
		</script>
		
		
	</body>
</html>